<template>
    <div class="comp-sell-ad-list comp-ad-list">
        <div class="m-table-flex ad-list-table">
            <div class="thead">
                <div class="tr">
                    <div class="th" width="300">賣家資訊</div>
                    <div class="th">
                        <div class="select">
                            支持付款方式
                            <!--<span class="select-title" ref="payType">-->
                                <!--<span v-if="payType === ''">支持付款方式</span>-->
                                <!--<span v-if="payType === 'ALIPAY'">支付寶</span>-->
                                <!--<span v-if="payType === 'BANK'">銀行卡</span>-->
                                <!--<i class="icon-allow-down"  :class="{'icon-allow-down&#45;&#45;active':showPayType}"></i>-->
                            <!--</span>-->
                            <!--<div class="select-content" v-if="showPayType" ref="payTypePopover">-->
                                <!--<p @click="setPayType('')" class="item">支持付款方式</p>-->
                                <!--<p @click="setPayType('ALIPAY')" class="item" :class="{'item&#45;&#45;active':payType==='ALIPAY'}">支付寶</p>-->
                                <!--<p @click="setPayType('BANK')" class="item" :class="{'item&#45;&#45;active':payType==='BANK'}">銀行卡</p>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="th">價格/{{assetCode}}</div>
                    <div class="th">可購買</div>
                    <div class="th"></div>
                </div>
            </div>
            <div class="tbody">
                <div v-for="item in list" v-if="isLoading === false && list.length > 0" class="tr" @click="goOrder(item.advertId)">
                    <div class="td">
                        <div class="user-info">
                            <div class="first-name">{{item.nickNameShort}}</div>
                            <div class="nick-name">
                                <p class="text">{{item.nickName}}</p>
                                <p><img src="../img/china.png" alt="" width="18"></p>
                            </div>

                            <div class="user-info-popover">
                                <div class="user-pop">
                                    <div class="first-name-pop">{{item.nickNameShort}}</div>
                                    <div class="nick-name nick-name-pop">
                                        <p class="text">{{item.nickName}}</p>
                                        <p class="text fn-gray">交易次數 {{item.c2cTransactionInfoDto.totalCount}}</p>
                                    </div>
                                </div>
                                <div class="trade-pop">
                                    <p class="trade-item trade-item--active">
                                        <i class="icon icon-email icon--active"></i>
                                        <span>郵箱已認證</span>
                                        <i class="icon-check"></i>
                                    </p>
                                    <p class="trade-item" :class="{'trade-item--active':item.c2cTransactionInfoDto.phone}">
                                        <i class="icon icon-phone" ></i>
                                        <span>手機{{item.c2cTransactionInfoDto.phone?'已':'未'}}認證</span>
                                        <i class="icon-check" v-if="item.c2cTransactionInfoDto.phone"></i>
                                    </p>
                                    <p class="trade-item" :class="{'trade-item--active':item.c2cTransactionInfoDto.authLevel==='LEVEL1'||item.c2cTransactionInfoDto.authLevel==='LEVEL2'}">
                                        <i class="icon icon-sfz"></i>
                                        <span>身分證{{(item.c2cTransactionInfoDto.authLevel==='LEVEL1'||item.c2cTransactionInfoDto.authLevel==='LEVEL2')?'已':'未'}}認證</span>
                                        <i class="icon-check" v-if="item.c2cTransactionInfoDto.authLevel==='LEVEL1'||item.c2cTransactionInfoDto.authLevel==='LEVEL2'"></i>
                                    </p>
                                </div>
                            </div>
                        </div>


                        <!--<popover placement="top" trigger="hover" width="auto">-->
                            <!--<div class="user-info">-->
                                <!--<div class="first-name">姓</div>-->
                                <!--<div class="nick-name">-->
                                    <!--<p>昵称</p>-->
                                    <!--<p>国旗</p>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div slot="content">-->
                                <!--<div class="user-info-popover">-->
                                    <!--<div class="user-info">-->
                                        <!--<div class="first-name">姓</div>-->
                                        <!--<div class="nick-name">-->
                                            <!--<p>昵称</p>-->
                                            <!--<p>国旗</p>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <!--<div>-->
                                        <!--<i class="icon">icon</i>-->
                                        <!--<i class="icon">icon</i>-->
                                        <!--<i class="icon">icon</i>-->
                                    <!--</div>-->
                                    <!--<p>交易次数 26     被鼓励次数 5</p>-->
                                    <!--<p>  1000次鼓励系统奖励1ACT</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</popover>-->
                    </div>
                    <div class="td">
                        <!--<template v-for="ptype in item.payType">-->
                            <!--<template v-if="ptype === 'ALIPAY'">支付宝</template>-->
                            <!--<template v-if="ptype === 'BANK'">银行卡</template>-->
                        <!--</template>-->
                        {{item.payTypeText}}
                    </div>
                    <div class="td"><span class="fn-black fn-bold">{{filter.floorFix(item.tradePrice,2)}}</span> CNY</div>
                    <div class="td">{{filter.floorFix(item.minMoney,2)}} ~ {{filter.floorFix(item.maxMoney,2)}} CNY</div>
                    <div class="td">
                        <a href="javascript:;" class="btn" @click="goOrder(item.advertId)">購買{{assetCode}}</a>
                    </div>
                </div>
            </div>

            <loading v-if="isLoading"></loading>
            <no-data v-if="isLoading === false && list && list.length === 0"></no-data>
        </div>
        <pager :page-no="pageNo"
               :page-size="pageSize"
               :on-page-change="changePage"
               :page-num="pageNum"></pager>
    </div>

</template>



<script type="text/babel">
    import {PAGE_SIZE} from '../../../../grsc-base/common/constants';
    import Loading from '../../../../grsc-base/component/Loading.vue';
    import NoData from '../../../../grsc-base/component/NoData.vue';
    import Pager from '../../../../grsc-base/component/Pager.vue';
    import Popover from '../../../../grsc-base/component/Popover.vue';
    import service from '../service';
    import filter from '../../../../grsc-base/util/filter'
    import lib from '../../../common/lib'

    export default {
        components: {
            Loading,
            NoData,
            Pager,
            Popover,

        },
        data() {
            return {
                pageNo: 1,
                pageSize: PAGE_SIZE,
                pageNum: 1,
                isLoading:false,

                list:null,
                payType:'',
                showPayType:false,
                filter:filter


            };
        },
        props:{
            assetCode:{
                type:String,
                default:'ACT'
            }
        },
        created() {
            this.fetchList();
        },

        watch:{
            assetCode(){
                this.fetchList();
            }
        },

        mounted(){
            let $elem = $(this.$refs.payType);
            let $popover = $(this.$refs.payTypePopover);

            $elem.on("click", (e)=>{
                this.showPayType = !this.showPayType;

                $(document).one("click", ()=>{
                    this.showPayType = false;
                });

                e.stopPropagation();
            });
            $popover.on("click", (e)=>{
                e.stopPropagation();
            });

        },
        methods: {

            /**
             * 获取售出广告列表
             * */
            fetchList(){
                this.isLoading = true;
                let param = {
                    assetCode:this.assetCode,
                    pageSize:this.pageSize,
                    pageNo:this.pageNo
                };

                if(this.payType!==''){
                    param.payType = this.payType;
                }
                service.sellAdvertQuery(param).done((rep)=>{
                    if (rep.code == window.CODE.SUCCESS) {
                        this.list = rep.data.list;
                        this.pageNum = Number(filter.ceilFix(rep.data.total / this.pageSize, 0));
                        formatList(this.list);
                    } else {
                        window.error(rep.msg);
                    }
                }).fail((rep) => {
                    this.list = [];
                }).always(()=>{
                    this.isLoading = false;
                });

                function formatList(list) {
                    $.map(list, (item, index) => {
                        let payTypeArr = [];
                        item.payType.forEach(type=>{
                            switch (type){
                                case 'ALIPAY':
                                    payTypeArr.push('支付寶');
                                    break;
                                case 'BANK':
                                    payTypeArr.push('銀行卡');
                                    break;
                            }
                        });
                        item.payTypeText = payTypeArr.join('/');

                        let nickname = item.c2cTransactionInfoDto.nickName;
                        if(nickname){
                            item.nickName = nickname;
                            item.nickNameShort = nickname.substr(0,1);
                        }else{
                            item.nickName = '';
                            item.nickNameShort = '';
                        }
                    });
                }
            },

            goOrder(id){
                lib.checkLogin(() => {
                    location.href = '#/ad/detail/sell/'+id;
                })
            },

            setPayType(val){
                this.showPayType = false;
                this.payType = val;
                this.fetchList();
            },

            changePage(currentPage) {
                this.pageNo = currentPage;
                this.fetchList();
            },
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
</style>
